<template>
    <div class="table-page">
        <div class="table-search-box" @keyup.enter="search()">
            <div class="search-item">
                <label>名称：</label>
                <div class="table-query-input">
                    <el-input
                        v-model="queryData.name"
                        clearable
                        placeholder="名称"
                    ></el-input>
                </div>
            </div>

            <div class="search-item">
                <label>行业：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.industryId"
                        v-loading="industryFlag"
                        filterable
                        clearable
                        placeholder="请选择行业"
                        reserve-keyword
                    >
                        <el-option
                            v-for="item in industryData"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <label>考试：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.examId"
                        v-loading="examFlag"
                        filterable
                        clearable
                        placeholder="请选择考试"
                        reserve-keyword
                    >
                        <el-option
                            v-for="item in examData"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    :loading="tableLoading"
                    @click="clickSearch()"
                >搜索
                </el-button>
            </div>
            <div class="search-item">
                <el-button
                    icon="el-icon-refresh"
                    :loading="tableLoading"
                    @click="resetSearch()"
                >重置
                </el-button>
            </div>
        </div>
        <div class="table-operation-box">
            <el-button
                type="primary"
                style="margin-bottom: 2em"
                icon="el-icon-plus"
                @click="go('./add')"
            >新增
            </el-button>
            <el-button
                type="danger"
                plain
                style="margin-bottom: 2em"
                icon="el-icon-delete"
                :disabled="selectDisable"
                @click="
                    tableDelete(
                        '/exam/package/deletes',
                        {
                            ids: tableSelect
                        },
                        true
                    )
                "
            >批量删除
            </el-button>
            <el-button
                type="primary"
                style="margin-bottom: 2em"
                icon="el-icon-monitor"
                @click="alloGroup()"
            >分配平台
            </el-button>

        </div>
        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                :data="tableData"
                border
                style="width: 100%;min-height:40em"
                row-key="id"
                @selection-change="tableSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="名称"
                    min-width="100"
                ></el-table-column>
                <el-table-column
                    prop="industryName"
                    label="行业名称"
                    min-width="100"
                ></el-table-column>
                <el-table-column
                    prop="examName"
                    label="考试名称"
                    min-width="100"
                ></el-table-column>
                <el-table-column
                    prop="discountPrice"
                    label="折扣价￥"
                    min-width="100"
                    >
                    <template slot-scope="scope">
                        {{ priceChange(scope.row.discountPrice) }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="agentPrice"
                    label="代理价格￥"
                    min-width="100"
                >
                    <template slot-scope="scope">
                        {{ priceChange(scope.row.agentPrice) }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="days"
                    label="有效天数"
                    min-width="100"
                ></el-table-column>
                <el-table-column
                    prop="tagNameList"
                    label="标签名称"
                    min-width="100"
                >
                    <template slot-scope="scope">
                        <el-tag v-for="(item) in scope.row.tagNameList" :key="item" >{{item }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="状态"
                    min-width="60"
                    align="center"
                >
                    <template slot-scope="scope">
                        <k-tag :tag="scope.row.enable ? { desc:'已上架',color:'#6ADA8D'} : { desc:'已下架',color:'#fb4e4e'}"></k-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="是否推荐"
                    min-width="60"
                    align="center"
                >
                    <template slot-scope="scope">
                        <k-tag :tag="scope.row.recommend ? { desc:'推荐',color:'#6ADA8D'} : { desc:'无',color:'#fb4e4e'}"></k-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="200"
                    align="center"
                    fixed="right"
                >
                    <template slot-scope="scope">
                        <el-button
                            v-if="!scope.row.edit"
                            type="text"
                            size="mini"
                            icon="el-icon-edit"
                            :loading="scope.row.opLoading"
                            @click="go('add?id=' + scope.row.id)"
                        >编辑
                        </el-button>
                        <el-button
                            v-if="scope.row.enable"
                            :loading="scope.row.opLoading"
                            type="text"
                            size="mini"
                            class="warning"
                            icon="el-icon-lock"
                            @click="lock(scope.row.id, false)"
                        >下架
                        </el-button>
                        <el-button
                            v-if="!scope.row.enable"
                            :loading="scope.row.opLoading"
                            size="mini"
                            type="text"
                            icon="el-icon-unlock"
                            @click="lock(scope.row.id, true)"
                        >上架
                        </el-button>
                        <el-button
                            v-if="scope.row.recommend"
                            :loading="scope.row.opLoading"
                            type="text"
                            size="mini"
                            class="warning"
                            icon="el-icon-collection"
                            @click="updatePackage(scope.row.id, false)"
                        >取消推荐
                        </el-button>
                        <el-button
                            v-if="!scope.row.recommend"
                            :loading="scope.row.opLoading"
                            size="mini"
                            type="text"
                            icon="el-icon-collection"
                            @click="updatePackage(scope.row.id, true)"
                        >推荐
                        </el-button>
                        <el-button
                            v-if="!scope.row.edit"
                            class="warning"
                            type="text"
                            icon="el-icon-delete"
                            size="mini"
                            :loading="scope.row.opLoading"
                            @click="
                                tableDelete(
                                    '/exam/package/delete',
                                    {
                                        id: scope.row.id
                                    },
                                    true
                                )
                            "
                        >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="pageData.total" class="xy-between table-page-box">
            <el-pagination
                background
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pageSizes"
                :page-size.sync="pageData.pageSize"
                layout="total,  prev, pager, next, sizes, jumper"
                :total="pageData.total"
            >
            </el-pagination>
        </div>
        <el-dialog
            :visible.sync="dialogAlloGroup"
            custom-class="one-dialog"
            @close="
                () => {
                    base64Icon = null;
                }
            "
        >
            <el-select
                v-model="bindGroupIds"
                filterable
                clearable
                placeholder="请选择机构"
                multiple
                reserve-keyword
            >
                <el-option
                    v-for="item in groupList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                >
                </el-option>
            </el-select>

            <span slot="footer" class="dialog-footer">
                <el-button :loading="submitFlag" @click="dialogClose"
                >取 消</el-button
                >
                <el-button
                    :loading="submitFlag"
                    type="primary"
                    @click="bindGroup"
                >绑 定</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {execCall, TablePage} from "@/layout/mixin/iVue.js";
import {mapState} from "vuex";
import {get,put} from "@/api/request";
import {changePackageStatus, updatePackage} from "@/api/exam";
import {update} from "script-ext-html-webpack-plugin/lib/elements";

export default {
    name: "PackageList",
    components: {},
    mixins: [TablePage],
    data() {
        return {
            examType: null,
            industryData: [],
            examData: [],
            industryFlag: false,
            examFlag: false,
            queryData: {
                examType: null,
                base: true,
                name: "",
                industryId: null,
                examId: null,
            },

            initAddForm: {
                id: null,
                name: null,
                price: null,
                agentPrice: null,
                sort: 100,
                industryId: null,
                examId: null,
                categoryId: null,
                columnIds: [],
                days: null,
                endDate: null,
                examType: "zhiye"
            },
            dialogAlloGroup:false,
            bindGroupIds: [],
        };
    },
    computed: {
        ...mapState({})
    },
    watch: {
        $route: function (to, from) {
            // 拿到目标参数 to.query.id 去再次请求数据接口
            this.refresh = this.$route.query.refresh;
            if (from.name === "PackageAdd" && this.refresh) {
                this.search();
            }
        },
        "queryData.examType"() {
            if(this.queryData.examType === "gjtk"){
                this.queryData.industryId = "gjtk";
            }else {
                this.queryData.industryId = null;
            }

        },
        "queryData.industryId"(industryId) {
            this.queryData.examId = null;
            if (industryId) {
                this.loadExam(industryId);
            } else {
                this.examData = [];
            }
        },
    },
    created() {
        this.loadIndustry();
        this.loadGroupList();
    },
    mounted() {
    },
    methods: {
        search(queryData = {}) {
            this.loadTable("/exam/package/page");
        },
        lock(id, status) {
            changePackageStatus({id: id, enable: status}).then(res => {
                this.$message.success("修改成功");
                this.search();
            })
        },
        updatePackage(id,status){
            updatePackage({id:id,recommend:status}).then(res => {
                this.$message.success("修改成功");
                this.search();
            })
        },
        loadIndustry() {
            this.industryFlag = true;
            get("/exam/industry/list",{size: 1000})
                .then(res => {
                    this.industryData = res;
                })
                .finally(() => {
                    this.industryFlag = false;
                });
        },
        loadExam(industryId, name) {
            this.examFlag = true;
            get("/exam/exam/list", {
                industryId,
                name,
                size: 1000
            })
                .then(res => {
                    this.examData = res;
                })
                .finally(() => {
                    this.examFlag = false;
                });
        },
        priceChange(number) {
            const bs = number / 100;
            return bs.toFixed(2) + "元";
        },
        alloGroup(){
            if(this.tableSelect === null || this.tableSelect.length === 0 ){
                this.$message.error("请选择套餐");
                return false;
            }
            this.dialogAlloGroup = true;

        },
        bindGroup(){
            if(this.tableSelect === null || this.tableSelect.length === 0 ){
                this.$message.error("请选择套餐");
                return false;
            }
            console.log("绑定机构",this.bindGroupIds);
            put("/exam/package/batch_bind_group",{
                ids:this.tableSelect,
                groupIds: this.bindGroupIds.toString(),
            }).then(res => {
                this.$message.success("绑定成功");
                this.dialogAlloGroup = false;
            })
        }
    }
};
</script>

<style lang="scss" scoped>
::v-deep .el-transfer-panel {
    width: 300px;
}
</style>
